<template>
    <div>
        <vs-code :filesManagerData="filesManagerData" :item="snippet" :value="value" @updateSnippet="updateSnippet"></vs-code>
    </div>
</template>

<script>
import VsCode from '../components/VsCode.vue'
import API from '../api'
export default {
    components: { VsCode },
    name: 'MyVsCode',
    data() {
        return {
            value: '',
            snippet: {},
            filesManagerData: []
        }
    },
    activated() {
        this.$root.$emit('switchCollapse', true)
        this.getSnippetInfo()
        this.$root.$on('getSnippetInfo', () => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.getSnippetInfo() // 调用父路由中的方法
        })
        this.$root.$on('cleanSnippetInfo', () => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.cleanSnippetInfo() // 调用父路由中的方法
        })
        this.$root.$on('updateSnippetNote', (e) => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.updateSnippetNote(e) // 调用父路由中的方法
        })
        this.$root.$on('updateSnippetValue', (e) => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.updateSnippetValue(e) // 调用父路由中的方法
        })
        this.$root.$on('getSnippetProject', () => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.getSnippetProject() // 调用父路由中的方法
        })
    },
    mounted() {

    },
    computed: {

    },
    methods: {
        // 获取代码片段结构
        getSnippetProject() {
            if (this.snippet.type != 1) {
                this.filesManagerData = []
                return
            }
            this.axios(API.snippetProject.getSnippetProject(this.snippet.id)).then(res => {
                this.filesManagerData = res.data.data.children
            }).catch((e) => {
                this.$message.error(e)
            })
        },
        cleanSnippetInfo() {
            this.snippet = {}
            this.value = ''
        },
        async getSnippetInfo() {
            if (this.$route.query.snippet != null) {
                this.axios(API.snippet.getSnippet(this.$route.query.snippet)).then(res => {
                    if (res.data.data == null) {
                        this.$message.error('该代码片段已下架或者被删除！')
                    }
                    this.value = res.data.data.content
                    this.snippet = res.data.data
                    this.getSnippetProject()
                }).catch((e) => {
                    console.log(e)
                })
            }
            if (this.$route.query.url != null) {
                console.log(this.$route.query.url)
                this.$message({
                    message: '获取链接文件地址成功，请注意当前状态无法保存。',
                    type: 'success'
                })
                const res = await this.axios({
                    url: this.$route.query.url,
                    method: 'GET'
                })
                this.value = res.data
            }
        },
        updateSnippetNote(e) {
            this.snippet.note = e
        },
        updateSnippetValue(e) {
            this.value = e
        },
        updateSnippet(value, img) {
            this.snippet.content = value
            this.snippet.img = img
            this.axios(API.snippet.updateSnippet(this.snippet)).then(() => {
                this.$message({
                    message: 'Saved!',
                    type: 'success'
                })
            }).catch((e) => {
                this.$message.error(e)
            })
        },
        switchCollapse(status) {
            this.$root.$emit('switchCollapse', status)
        }
    }
}
</script>

<style scoped>

</style>
